<template>
	<view class="mainPage whitePage" :style="{'padding-top': `${$store.state.safeArea.top || 0}px`, 'padding-bottom': `${$store.state.safeArea.bottom || 0}px`}">
		<public-head :title="title" onlyHead noshadow></public-head>
		<view class="title">
			注册成为宠e生
		</view>
		<view class="register">
			<u-field v-model="mobile" placeholder="请填写手机号" maxlength="11" type="number">
			</u-field>

			<u-field v-model="code" placeholder="请填写验证码">
				<u-button size="mini" slot="right" type="warning" @click="getCode">{{codeText}}</u-button>
			</u-field>
			<u-field v-model="password" placeholder="请设置密码" :password="true">
			</u-field>
			<u-field v-model="passwords" placeholder="请确认密码" :password="true">
			</u-field>
			<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>

		</view>
		<view class="agreement">
			注册代表阅读并同意<text @click="tiaozhuan()">《宠宠医协议》</text>
		</view>
		<view>
			<button class="but" v-if="mobile.length < 11">注册</button>
			<button class="but active" v-show="mobile.length == 11" @click="register">注册</button>
		</view>
	</view>
</template>

<script>
	var that
	import publicHead from "@/components/publicHead/publicHead.vue"
	export default {
		components: {
			publicHead
		},
		data() {
			return {
				title: '医生注册',
				mobile: '',
				code: '',
				codeText: '',
				password: '',
				passwords: ''
			}
		},
		onLoad() {
			that = this
		},
		methods: {
			tiaozhuan(){
				uni.navigateTo({
					url:'../../pagesB/mykehu/xieyi'
				})
			},
			codeChange(text) {
				that.codeText = text;
			},
			getCode() {
				if(that.mobile == ''){
				uni.showToast({
					title: '请输入手机号',
					icon: 'none',
					duration: 1500
				});
				return
				}
				if (that.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					that.fs()
				} else {
					that.$u.toast('倒计时结束后再发送');
				}
			},
			fs(){
				let postData = {
					status:1,
					phone:that.mobile,
					source:2
				}
				that.$postAjax2('Doctor_send_code',postData,function(data){
					uni.hideLoading();
					// 通知验证码组件内部开始倒计时
					that.$refs.uCode.start();
				})
			},
			register() {
				if(that.mobile == ''){
				uni.showToast({
					title: '请输入手机号',
					icon: 'none',
					duration: 1500
				});
				return
				}
				if(that.code == ''){
				uni.showToast({
					title: '请输入验证码',
					icon: 'none',
					duration: 1500
				});
				return
				}
				if(that.password == ''){
				uni.showToast({
					title: '请输入密码',
					icon: 'none',
					duration: 1500
				});
				return
				}
				if(that.passwords == ''){
				uni.showToast({
					title: '请再次输入密码',
					icon: 'none',
					duration: 1500
				});
				return
				}
				if(that.password != that.passwords){
				uni.showToast({
					title: '两次输入密码不一致',
					icon: 'none',
					duration: 1500
				});
				return
				}
				uni.showLoading({
					mask: true
				});
				let postData = {
					password:that.password,
					phone:that.mobile,
					code:that.code
				}
				that.$postAjax2('Doctor_doctorRegister',postData,function(data){
					uni.hideLoading()
					uni.navigateBack({
						delta:1
					})
					uni.showToast({
						title: '注册成功',
						icon: 'none',
						duration: 1500
					});
				})
			}
		}
	}
</script>

<style lang="scss">
.mainPage{
	.u-field{
		.u-field-inner{
			.u-label{
				display: none !important;
			}
		}
	}
}
</style>
<style lang="scss" scop>
.title {
	font-size: 36rpx;
	font-family: PingFang SC;
	font-weight: bold;
	line-height: 50rpx;
	color: #383F49;
	opacity: 1;
	padding: 50rpx;
}

.register {
	padding: 50rpx;
}

.agreement {
	padding: 50rpx;

	text {
		color: #FF8F2B;
		font-size: 24rpx;
	}
}

.but {
	margin-top: 60rpx;
	background: #C4C4C6;
	opacity: 1;
	border-radius: 44rpx;
	width: 80%;
	color: #FFFFFF;
}

.active {
	background: #FF8F2B;
}
</style>
